<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>健康减肥助手</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        :root {
            --primary-color: #4CAF50;
            --secondary-color: #2196F3;
        }
        
        body {
            background-color: #f5f5f5;
            font-family: 'Microsoft YaHei', sans-serif;
            font-size: 14px;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            padding-bottom: 30px; /* 添加底部内边距 */
        }
        
        .container {
            width: 100%;
            max-width: 100%;
            margin: 0;
            padding: 15px;
            padding-bottom: calc(env(safe-area-inset-bottom) + 30px); /* 增加底部内边距 */
        }

        h1 {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 1.5rem;
            font-size: 1.5rem;
        }

        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            margin-bottom: 15px;
        }

        .card-title {
            color: var(--primary-color);
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.8rem;
        }

        .card-body {
            padding: 15px;
        }

        .btn {
            border-radius: 20px;
            padding: 8px 15px;
            font-size: 0.9rem;
            font-weight: 500;
            min-height: 44px;
        }

        .input-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .input-group .form-control,
        .input-group .btn {
            width: 100%;
            margin: 0;
        }

        textarea.form-control,
        input.form-control {
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            padding: 12px;
            font-size: 1rem;
            -webkit-appearance: none;
        }

        .weight-chart {
            margin: 15px 0;
            padding: 8px;
            background: white;
            border-radius: 8px;
            height: 200px;
        }

        .bmi-calculator {
            padding: 15px;
            border-radius: 10px;
        }

        .bmi-input-group {
            margin-bottom: 15px;
        }

        .bmi-input-group input {
            padding: 12px 15px 12px 40px;
            height: 44px;
            font-size: 1rem;
        }

        .btn-calculate {
            height: 44px;
            font-size: 1.1rem;
            background-color: var(--primary-color);
            color: white;
            width: 100%;
        }

        .weight-range {
            padding: 12px;
            margin-top: 12px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .weight-range table {
            min-width: 100%;
            font-size: 0.9rem;
        }

        .weight-range th, 
        .weight-range td {
            padding: 6px;
            white-space: nowrap;
        }

        #posts .card {
            margin-bottom: 12px;
        }

        .btn-sm {
            min-height: 32px;
            font-size: 0.8rem;
            padding: 4px 10px;
        }

        .food-rating {
            color: #FFD700;
            font-size: 1.2rem;
        }

        .food-table td {
            vertical-align: middle;
        }

        /* 适配iPhone X及以上的安全区域 */
        @supports (padding-bottom: env(safe-area-inset-bottom)) {
            .container {
                padding-bottom: calc(env(safe-area-inset-bottom) + 30px); /* 增加底部内边距 */
            }
        }

        /* 优化触摸反馈 */
        @media (hover: none) {
            .card:hover {
                transform: none;
            }
            
            .btn:active {
                transform: scale(0.98);
            }
        }

        /* 针对小屏设备优化字体大小 */
        @media (max-width: 320px) {
            body {
                font-size: 13px;
            }
            
            h1 {
                font-size: 1.3rem;
            }
            
            .card-title {
                font-size: 1rem;
            }
        }

        /* Toast样式 */
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px 20px;
            border-radius: 4px;
            z-index: 9999;
        }

        /* 食谱卡片样式 */
        .recipe-card {
            background: #fff;
            border-radius: 10px;
            margin-bottom: 15px;
        }

        .meal-time {
            background: var(--primary-color);
            color: white;
            padding: 8px 15px;
            border-radius: 5px;
            margin-bottom: 10px;
            display: inline-block;
        }

        .recipe-list {
            list-style: none;
            padding-left: 0;
        }

        .recipe-list li {
            padding: 8px 0;
            border-bottom: 1px dashed #eee;
        }

        .recipe-tips {
            font-size: 0.9rem;
            color: #666;
            margin-top: 10px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center">健康减肥助手</h1>
        
        <!-- 发帖区域 -->
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">分享你的减肥心得</h5>
                <textarea class="form-control mb-3" rows="3" placeholder="写下你想说的话..."></textarea>
                <button class="btn btn-primary">发布</button>
            </div>
        </div>

        <!-- 减肥食谱卡片 -->
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">上班族减肥食谱推荐</h5>
                
                <!-- 早餐 -->
                <div class="recipe-card">
                    <div class="meal-time">早餐 (约300-400卡路里)</div>
                    <ul class="recipe-list">
                        <li>🥚 水煮蛋 1个 + 全麦面包片 1片</li>
                        <li>🥛 无糖豆浆 1杯</li>
                        <li>🍎 苹果 1个</li>
                        <li>🥗 生菜沙拉（可选）</li>
                    </ul>
                    <div class="recipe-tips">
                        <strong>小贴士：</strong>前一晚可以准备好，早上直接带走。建议7:00-8:00之间食用。
                    </div>
                </div>

                <!-- 午餐 -->
                <div class="recipe-card">
                    <div class="meal-time">午餐 (约450-500卡路里)</div>
                    <ul class="recipe-list">
                        <li>🍚 糙米饭 1小碗（约100g）</li>
                        <li>🍗 鸡胸肉（蒸煮）100g</li>
                        <li>🥦 西兰花/菜花 100g</li>
                        <li>🥕 胡萝卜/青椒 50g</li>
                        <li>🥗 凉拌黄瓜 100g</li>
                    </ul>
                    <div class="recipe-tips">
                        <strong>小贴士：</strong>可以使用保温饭盒分格装载，建议12:00-13:00之间食用。蔬菜可以选择水煮或者清炒。
                    </div>
                </div>

                <!-- 晚餐 -->
                <div class="recipe-card">
                    <div class="meal-time">晚餐 (约350-400卡路里)</div>
                    <ul class="recipe-list">
                        <li>🐟 清蒸鱼片 100g</li>
                        <li>🥬 炒青菜 150g</li>
                        <li>🍜 荞麦面/红薯 100g</li>
                        <li>🥣 番茄蛋汤</li>
                    </ul>
                    <div class="recipe-tips">
                        <strong>小贴士：</strong>
                        <ul>
                            <li>建议18:00-19:00之间食用，睡前3小时停止进食</li>
                            <li>可以准备便携餐盒，加班时也能享用健康晚餐</li>
                            <li>建议少油少盐，以清淡为主</li>
                        </ul>
                    </div>
                </div>

                <div class="alert alert-info mt-3">
                    <strong>温馨提示：</strong>
                    <ul class="mb-0">
                        <li>食材建议提前一周采购和准备</li>
                        <li>可以周末批量处理食材，分装保存</li>
                        <li>建议准备便携水杯，保持充足水分摄入</li>
                        <li>食谱可以根据个人情况适当调整，但要保持营养均衡</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 体重记录区域 -->
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">今日体重记录</h5>
                <div class="input-group mb-3">
                    <input type="number" class="form-control" placeholder="输入今日体重(kg)">
                    <button class="btn btn-success">记录</button>
                </div>
                <div class="weight-chart">
                    <canvas id="weightChart"></canvas>
                </div>
            </div>
        </div>

        <!-- 食物热量卡片 -->
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">食物热量参考表</h5>
                <div class="table-responsive">
                    <table class="table table-hover food-table">
                        <thead>
                            <tr>
                                <th>食物名称</th>
                                <th>热量(每100g)</th>
                                <th>减肥推荐指数</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 蔬菜类 -->
                            <tr>
                                <td>生菜</td>
                                <td>15千卡</td>
                                <td><span class="food-rating">⭐⭐⭐⭐⭐</span></td>
                            </tr>
                            <tr>
                                <td>西红柿</td>
                                <td>20千卡</td>
                                <td><span class="food-rating">⭐⭐⭐⭐⭐</span></td>
                            </tr>
                            <tr>
                                <td>黄瓜</td>
                                <td>16千卡</td>
                                <td><span class="food-rating">⭐⭐⭐⭐⭐</span></td>
                            </tr>
                            <!-- 水果类 -->
                            <tr>
                                <td>苹果</td>
                                <td>52千卡</td>
                                <td><span class="food-rating">⭐⭐⭐⭐</span></td>
                            </tr>
                            <tr>
                                <td>香蕉</td>
                                <td>93千卡</td>
                                <td><span class="food-rating">⭐⭐⭐</span></td>
                            </tr>
                            <tr>
                                <td>西瓜</td>
                                <td>32千卡</td>
                                <td><span class="food-rating">⭐⭐⭐⭐</span></td>
                            </tr>
                            <!-- 主食类 -->
                            <tr>
                                <td>白米饭</td>
                                <td>116千卡</td>
                                <td><span class="food-rating">⭐⭐</span></td>
                            </tr>
                            <tr>
                                <td>全麦面包</td>
                                <td>265千卡</td>
                                <td><span class="food-rating">⭐⭐</span></td>
                            </tr>
                            <!-- 肉类 -->
                            <tr>
                                <td>鸡胸肉</td>
                                <td>165千卡</td>
                                <td><span class="food-rating">⭐⭐⭐</span></td>
                            </tr>
                            <tr>
                                <td>三文鱼</td>
                                <td>208千卡</td>
                                <td><span class="food-rating">⭐⭐⭐</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="alert alert-info mt-3">
                    <small>
                        ⭐⭐⭐⭐⭐ 极度推荐，可以多吃<br>
                        ⭐⭐⭐⭐ 推荐食用，注意适量<br>
                        ⭐⭐⭐ 适量食用，控制份量<br>
                        ⭐⭐ 少量食用，需要控制<br>
                        ⭐ 尽量避免食用
                    </small>
                </div>
            </div>
        </div>

        <!-- BMI计算器 -->
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">BMI计算器</h5>
                <div class="bmi-calculator">
                    <div class="bmi-input-group height-input">
                        <input type="number" class="form-control" id="height" placeholder="输入身高(cm)">
                    </div>
                    <div class="bmi-input-group weight-input">
                        <input type="number" class="form-control" id="weight" placeholder="输入体重(kg)">
                    </div>
                    <button class="btn btn-calculate" onclick="calculateBMI()">立即计算 BMI</button>
                </div>
                <div id="bmiResult"></div>
                <div class="weight-range">
                    <h6>健康体重范围参考</h6>
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>BMI范围</th>
                                <th>体重状态</th>
                                <th>您的理想体重范围</th>
                            </tr>
                        </thead>
                        <tbody id="weightRangeTable">
                            <tr>
                                <td><18.5</td>
                                <td>体重偏轻</td>
                                <td>-</td>
                            </tr>
                            <tr>
                                <td>18.5-23.9</td>
                                <td>体重正常</td>
                                <td>-</td>
                            </tr>
                            <tr>
                                <td>24.0-27.9</td>
                                <td>超重</td>
                                <td>-</td>
                            </tr>
                            <tr>
                                <td>≥28.0</td>
                                <td>肥胖</td>
                                <td>-</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 社区帖子展示区 -->
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">减肥社区</h5>
                <div id="posts">
                    <!-- 示例帖子 -->
                    <div class="card mb-2">
                        <div class="card-body">
                            <h6 class="card-subtitle mb-2 text-muted">用户A</h6>
                            <p class="card-text">今天完成5公里跑步，感觉很棒！</p>
                            <button class="btn btn-sm btn-outline-primary">点赞</button>
                            <button class="btn btn-sm btn-outline-secondary">评论</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 体重曲线图初始化
        const ctx = document.getElementById('weightChart').getContext('2d');
        const weightChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月'],
                datasets: [{
                    label: '体重变化曲线',
                    data: [70, 69, 68, 67, 66],
                    borderColor: '#4CAF50',
                    backgroundColor: 'rgba(76, 175, 80, 0.1)',
                    tension: 0.3,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: false,
                        ticks: {
                            font: {
                                size: 10
                            }
                        }
                    },
                    x: {
                        ticks: {
                            font: {
                                size: 10
                            }
                        }
                    }
                }
            }
        });

        // 显示Toast提示
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'toast';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 1500);
        }

        // BMI计算函数
        function calculateBMI() {
            const heightInput = document.getElementById('height');
            const weightInput = document.getElementById('weight');
            const height = heightInput.value;
            const weight = weightInput.value;

            // 检查输入是否为空
            if (!height || !weight) {
                showToast('请输入身高和体重');
                return;
            }

            // 转换身高为米
            const heightInMeters = height / 100;
            const bmi = weight / (heightInMeters * heightInMeters);
            
            // 计算理想体重范围
            const minNormalWeight = (18.5 * heightInMeters * heightInMeters).toFixed(1);
            const maxNormalWeight = (23.9 * heightInMeters * heightInMeters).toFixed(1);
            const maxOverWeight = (27.9 * heightInMeters * heightInMeters).toFixed(1);

            // 更新体重范围表格
            const rows = document.getElementById('weightRangeTable').rows;
            rows[0].cells[2].textContent = `<${minNormalWeight}kg`;
            rows[1].cells[2].textContent = `${minNormalWeight}kg - ${maxNormalWeight}kg`;
            rows[2].cells[2].textContent = `${maxNormalWeight}kg - ${maxOverWeight}kg`;
            rows[3].cells[2].textContent = `>${maxOverWeight}kg`;

            let status = '';
            let alertClass = 'alert-info';
            let advice = '';
            let encouragement = '';
            let targetWeight = '';
            
            if (bmi < 18.5) {
                status = '体重偏轻';
                alertClass = 'alert-warning';
                advice = '建议：适当增加营养摄入，注意均衡饮食，可以尝试增加一些优质蛋白的摄入。';
                encouragement = '💪 保持健康的饮食习惯，相信很快就能达到理想体重！';
                targetWeight = `建议将体重增加到 ${minNormalWeight}kg - ${maxNormalWeight}kg 之间`;
            }
            else if (bmi < 24) {
                status = '体重正常';
                alertClass = 'alert-success';
                advice = '建议：继续保持健康的生活方式，适量运动，均衡饮食。';
                encouragement = '👍 太棒了！你的身体状况非常健康，继续保持！';
                targetWeight = `您的体重在理想范围内：${minNormalWeight}kg - ${maxNormalWeight}kg`;
            }
            else if (bmi < 28) {
                status = '超重';
                alertClass = 'alert-warning';
                advice = '建议：控制饮食摄入，增加运动量，可以尝试每天快走30分钟。注意饮食要规律，避免暴饮暴食。';
                encouragement = '🌟 别担心，通过科学的运动和饮食计划，你一定能达到理想的体重！';
                targetWeight = `建议将体重控制在 ${minNormalWeight}kg - ${maxNormalWeight}kg 之间`;
            }
            else {
                status = '肥胖';
                alertClass = 'alert-danger';
                advice = '建议：需要制定科学的减重计划，建议咨询专业医生。可以从控制饮食热量和增加有氧运动开始。';
                encouragement = '✨ 每个人都有实现目标的能力，相信自己，从今天开始改变！';
                targetWeight = `建议将体重控制在 ${minNormalWeight}kg - ${maxNormalWeight}kg 之间`;
            }

            document.getElementById('bmiResult').innerHTML = `
                <div class="alert ${alertClass}">
                    <h5>BMI 评估结果</h5>
                    <p>您的BMI指数为: <strong>${bmi.toFixed(1)}</strong></p>
                    <p>身体状况: <strong>${status}</strong></p>
                    <p>目标体重范围: <strong>${targetWeight}</strong></p>
                    <hr>
                    <p>${advice}</p>
                    <p class="mb-0"><strong>${encouragement}</strong></p>
                </div>
            `;
        }
    </script>
</body>
</html>
